import { FC } from 'react';
import { useVM } from '@todo/ui';
import { observer } from 'mobx-react-lite';

import Sheet from '@mui/joy/Sheet';
import DialogTitle from '@mui/joy/DialogTitle';
import { RoleItemViewModel } from '../../../viewmodels/role.item.vm.ts';
import ModalClose from '@mui/joy/ModalClose';
import Divider from '@mui/joy/Divider';
import DialogContent from '@mui/joy/DialogContent';
import Typography from '@mui/joy/Typography';
import FormControl from '@mui/joy/FormControl';
import Box from '@mui/joy/Box';
import FormLabel from '@mui/joy/FormLabel';
import Switch from '@mui/joy/Switch';
import Input from '@mui/joy/Input';
import Select from '@mui/joy/Select';
import { ROLE_TYPE } from '../../../config/enum.ts';
import Option from '@mui/joy/Option';
import Textarea from '@mui/joy/Textarea';
import Stack from '@mui/joy/Stack';
import Chip from '@mui/joy/Chip';
import {DialogActions} from "@mui/joy";

interface IProps {}
const RolesDetailDrawer: FC<IProps> = () => {
  const vmItem = useVM<RoleItemViewModel>(RoleItemViewModel);
  // const { t } = useTranslation('user');

  return (
    <Sheet
      sx={{
        borderRadius: 'lg',
        p: 2,
        display: 'flex',
        flexDirection: 'column',
        gap: 2,
        height: '100%',
        overflow: 'auto',
      }}
    >
      <DialogTitle>Role detail</DialogTitle>
      <ModalClose />
      <Divider sx={{ mt: 'auto' }} />
      <DialogContent sx={{ gap: 2 }}>
        <Stack gap={2}>
          <Typography level="title-md" fontWeight="bold" sx={{ mt: 1 }}>
            Info:
          </Typography>
          <Stack direction="row"  alignItems="center">
            <Chip color="primary" variant="soft" sx={{mr: 1}}>
              ID
            </Chip>


            {vmItem.id}


          </Stack>
          <FormControl orientation="horizontal">
            <Box sx={{ flex: 1, pr: 1 }}>
              <FormLabel sx={{ typography: 'title-sm' }}>is Active</FormLabel>
            </Box>
            <Switch checked={vmItem.isActive} />
          </FormControl>

          <Box sx={{ flex: 1, pr: 1 }}>
            <FormControl sx={{ flexGrow: 1 }}>
              <FormLabel>Title:</FormLabel>
              <Input
                size="sm"
                type="name"
                placeholder="name"
                value={vmItem.name}
                sx={{ flexGrow: 1 }}
              />
            </FormControl>
          </Box>

          <Box sx={{ flex: 1, pr: 1 }}>
            <FormControl sx={{ flexGrow: 1 }}>
              <FormLabel>Type:</FormLabel>
              <Select
                size="sm"
                placeholder="name"
                value={vmItem.type}
                sx={{ minWidth: 200 }}
              >
                {Object.keys(ROLE_TYPE).map((key, idx) => {
                  return (
                    <Option
                      key={idx}
                      value={ROLE_TYPE[key as keyof typeof ROLE_TYPE]}
                    >
                      {ROLE_TYPE[key as keyof typeof ROLE_TYPE]}
                    </Option>
                  );
                })}
              </Select>
            </FormControl>
          </Box>
          <Box sx={{ flex: 1, pr: 1 }}>
            <FormControl sx={{ flexGrow: 1 }}>
              <FormLabel>Descrition:</FormLabel>
              <Textarea minRows={2} maxRows={4} value={vmItem.description} />
            </FormControl>
          </Box>
          <Divider sx={{ mt: 'auto' }} />
          <Typography level="title-md" fontWeight="bold" sx={{ mt: 1 }}>
            Permissions:
          </Typography>
        </Stack>
      </DialogContent>
      <DialogActions sx={{ mt: 'auto' }}>asd</DialogActions>
    </Sheet>
  );
};

export default observer(RolesDetailDrawer);
